import React, { Component } from 'react';
import { withRouter, SingletonRouter } from 'next/router';
import { Grid , Tag, Button} from '@alifd/next';
import { number } from 'prop-types';



const { Row, Col } = Grid;

interface S  {
    Num : Array<number>,
    quickSortNum:Array<number>
}


class QuickSort extends Component<null,S> {

    state = {
        Num : [],
        quickSortNum:[]
    }

    // 快速排序
    quickSort = (Arr: Array<number>): Array<number> => {
        const arr:Array<number> = [...Arr];
        if (arr.length <= 1) { return arr; }
        var pivotIndex = Math.floor(arr.length / 2);
        var pivot = arr.splice(pivotIndex, 1)[0];
        var left = [];
        var right = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < pivot) {
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }

        return this.quickSort(left).concat([pivot], this.quickSort(right));
    }

    componentDidMount():void{
        const Num:Array<number> = [];

        for(let i:number = 0 ; i < 100 ; i++){
            Num.push(Math.ceil(Math.random()*100))
        }
        console.log(Num)
        this.setState({Num})

    }

    render() {
        const {Num,quickSortNum} = this.state
        return (
            <div role="grid" style={{padding:20}}>
                <head><title>快速排序</title></head>
                 <Row wrap >
                    <Col span={24} style={{margin:20}}>
                        {Num.map((item,key):JSX.Element => <Tag key={key}>{item}</Tag>)}
                    </Col>

                    <Col span={24} style={{textAlign:"center"}} >
                        <Button
                         type="primary"
                         onClick={():void =>{
                            this.setState({quickSortNum:this.quickSort(Num)})
                        } }
                            >排序</Button>
                    </Col>

                    <Col span={24} style={{margin:20}}>
                        {quickSortNum.map((item,key):JSX.Element => <Tag key={key}>{item}</Tag>)}
                    </Col>
                    <Col span={24} >
                        <img style={{width:700,margin:'0 auto',display:'block'}} src="/static/quicksork/code.png" />
                    </Col>
                </Row>
            </div>
        )
    }
}

export default QuickSort 